Documenting CFPB web design standards
While completing the overhaul of consumerfinance.gov, I was tasked with documenting our new web design patterns and creating a visual guide including specifications for the usage, responsive behavior, content guidelines, and styling of each new pattern.
Then, the documentation was moved to our public facing Design Manual. There the guidelines can be accessed, discussed, and pushed forward by peripheral team members as well as the general public.
Roles included: visual design, UX design, and documentation.
First, developing of page types and the information architecture
Below is a diagram used to define the different pages types created for the new site.
Then, the development of new design patterns and modules, iterated on them and documented them along the way
Below is design spec documentation for the breadcrumbs pattern on consumerfinance.gov
And, below is documentation for forms on a “Learn page” template.
Finally, I moved documentation to the CFPB’s public facing Design Manual
After refining design patterns and discussing with internal and peripheral team members it was time to move things to the CFPB’s public Design Manual. Below is a screenshot of a documented pattern directly from the Design Manual.
